<script setup lang="ts">
import { get } from 'node_modules/axios/index.cjs';
import { computed, ref, watch } from 'vue';


// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 方法1: 直接使用 v-model 绑定 fruitList
// function getFruitList(){
//   // 获取本地存储的值,分两种情况：1.有值，2.没有值
//   if(localStorage.getItem('list') === null){
//     // 没有值，则返回默认值
//     return defaultList.value
//   } else {
//     // 有值，则返回本地存储的值
//     return JSON.parse(localStorage.getItem('list') || '[]')

//   }
// }

// const fruitList = ref<Fruit[]>(getFruitList())

// 默认水果列表
const defaultList = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
],) 

// 方法2: 使用 v-model 绑定 fruitList，但是要使用 watchEffect 监听 fruitList 的变化，并使用 JSON.stringify() 将 fruitList 转换为字符串，然后使用 localStorage.setItem() 将字符串保存到本地存储中
// 如果持久化的数据存在，则使用持久化的数据，否则使用默认数据
const fruitList = localStorage.getItem('list') === null ? 
  // 没有值,初始化默认数据
  ref<Fruit[]>(defaultList.value) 
  :
  // 有值，则使用持久化的数据
  ref<Fruit[]>(JSON.parse(localStorage.getItem('list') || '[]'))

watch(fruitList,()=>{
  localStorage.setItem('list',JSON.stringify(fruitList.value))
},{deep:true,immediate:true})

// 删除水果
const deleteFruit =( id:number)=>{
  fruitList.value = fruitList.value.filter(item => item.id !== id)
}

// 添加水果
const addFruit =(id:number)=>{
  // find写法：
  const fruitItem = fruitList.value.find(item =>item.id === id)
  fruitItem && fruitItem.num++

  // if(fruitItem){
  //   fruitItem.num++
  // }

  // findexIndex写法：通过下标来加
  // const fruitIndex = fruitList.value.findIndex(item => item.id === id)
  // fruitList.value[fruitIndex].num++
}

// 减少水果
const reduceFruit =(id:number)=>{
  // find写法：判断当前数量是否为1，是则不减
  const fruitItem = fruitList.value.find(item =>item.id === id)
  fruitItem && fruitItem.num--

  // // if(fruitItem){
  // //   fruitItem.num --
  // // }

  // findexIndex写法：通过下标来减
  // const fruitIndex = fruitList.value.findIndex(item => item.id === id)
  // fruitList.value[fruitIndex].num--
}

// 全选和反选:通过computed计算属性中的 get set 来控制全选和反选
const isCheckedAll = computed({
  // 计算结果 
  get(){
    // 需要通过 return 返回，使用 every 方法判断所有水果是否都被选中
    return fruitList.value.every(item => item.isChecked)
  },
  // 设置选中状态 --- 修改结果
  set(value){
     // 当全选状态改变时，更新每一个水果的选中状态
    fruitList.value.forEach((item) => 
     item.isChecked = value
    )
  }
})

// 方法一:
// 统计选中的总数量
// const totalCount = computed(()=>{
//   return fruitList.value.reduce((sum,item)=>{
//     if(item.isChecked){
//       return sum + item.num
//     }else{
//       return sum
//     }
//   },0)
// })
// 统计选中的总价
// const totalPrice = computed(()=>{
//   return fruitList.value.reduce((sum,item)=>{
//     if(item.isChecked){
//       return sum + item.num * item.price
//     }else{
//       return sum
//     }
//   },0)
// })

// 方法二：
// 计算选中的水果列表
const checkedFruitList = computed(()=>{
  return fruitList.value.filter(item => item.isChecked)
})

// 统计选中的总数量
const totalCount = computed(()=>{
  return checkedFruitList.value.reduce((sum,item)=>{
    return sum + item.num
  },0)
})

// 统计选中的总价
const totalPrice = computed(()=>{
  return checkedFruitList.value.reduce((sum,item)=>{
    return sum + item.num * item.price
  },0)
})


</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length > 0">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr active" v-for="item in fruitList" :key="item.id">
            <!-- <div class="td"><input type="checkbox" v-bind:checked="item.isChecked" /></div> -->
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img v-bind:src=item.icon alt="" /></div>
            <div class="td">{{item.price}}</div>
            <div class="td">
              <!-- 计数器 -->
              <div class="my-input-number">
                <!-- disabled 禁止按钮 -->
                <button :disabled="item.num <= 1" class="decrease" @click="reduceFruit(item.id)"> - </button>
                <span class="my-input__inner">{{item.num}}</span>
                <button class="increase" @click="addFruit(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{item.price * item.num}}</div>
            <div class="td" @click="deleteFruit(item.id)"><button>删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <!-- 双向绑定 v-model -->
          <input type="checkbox" v-model="isCheckedAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{totalCount}} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" v-else>🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>